<template>
	<view class="container">
		
		<view class="flex-between row boxPanel " @click="showDevice = true">
		  <view class="">设备类型<text class="c-origin text-bold">*</text></view>
		  <view class="flex-y-center" style="width: 50%;">
		    <input type="text" placeholder="请选择类型" v-model="deviceName" placeholder-class="inputs" :disabled="true" style="text-align: right;">
		  	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">设备编号<text class="c-origin text-bold">*</text></view>
		  <view class="flex-y-center" style="width: 50%;">
		    <input type="text" placeholder="请输入设备编号" v-model="formData.code" placeholder-class="inputs"  style="text-align: right;">
		  	<i class="iconfont color-title2 m-l-10" @click="scanCode()">&#xe603;</i>
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">设备名称<text class="c-origin text-bold">*</text></view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="请输入设备名称" v-model="formData.name" placeholder-class="inputs" style="text-align: right;">
		  </view>
		</view>
		<view class="flex-between row boxPanel " @click="selectVenue()">
		  <view class="">所属场所<text class="c-origin text-bold">*</text></view>
		  <view class="flex-y-center" style="width: 76%;">
		    <input type="text" placeholder="请选择场所" v-model="locationName" placeholder-class="inputs" :disabled="true" style="text-align: right;width:96%;">
		  	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
		  </view>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="submit">保存</view>
		</view>

		<!-- 选择设备组件 -->
		<u-picker :show="showDevice" :columns="deviceList" keyName="name" @confirm="confirmDevice" @cancel="cancelDevice"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				formData: {
					deviceId: '',
					code: '', 
					name: '', 
					location_id: '', 
				},
				showDevice: false,
				deviceName: '',
				deviceList: [],
				locationName: '',

			}
		},
		onLoad() {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
			//   监听上一个页面选中的场所信息
			uni.$on("selectLocation", (data) => {
				this.locationName = data.address;
				this.formData.location_id = data.id;
			})


		  this.getList()
		},
		methods: {
			scanCode() {
				var that = this;
				// 扫描普通二维码，解析里面的参数，然后设置到输入框里面
				uni.scanCode({
					success: function (res) {
						console.log('条码被扫描结果', res.result)
						that.formData.code = res.result;
					}
				})

			},
			selectVenue() {
				this.$util.redirectTo('/otherpages/health/selectVenue?location_id='+this.formData.location_id)
			},
			confirmDevice(e) {
				console.log(e)
				this.formData.deviceId = e.value[0].id;
				this.deviceName = e.value[0].name;
				this.showDevice = false;
			},
			cancelDevice() {
				this.showDevice = false;
			},
			getList() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceList",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.deviceList = [res.data];
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			submit() {
				if(!this.validateForm()) return;
				
				uni.showLoading({
					title: '提交中...'
				});

				this.$api.sendRequest({
			      url: "/api/userHealth/bindDevice",
			      data: {
			        type: this.formData.deviceId,
					code: this.formData.code,
					name: this.formData.name,
					location_id: this.formData.location_id,
			      },
			      success: res => {
			        if(res.code == 0) {
						uni.hideLoading();
						// 判断绑定的设备是否需要链接蓝牙
						if(this.formData.deviceId == 13 || this.formData.deviceId == 12) {
							this.nextTips()
						}else {
							uni.showToast({
								title: '绑定成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			validateForm() {
				if(!this.deviceName) {
					uni.showToast({title: '请选择设备类型', icon: 'none'});
					return false;
				}
				if(!this.formData.code ) {
					uni.showToast({title: '请输入设备编号', icon: 'none'});
					return false;
				}
				if(!this.formData.name) {
					uni.showToast({title: '请输入设备名称', icon: 'none'});
					return false;
				}
				if(!this.formData.location_id) {
					uni.showToast({title: '请选择场所', icon: 'none'});
					return false;
				}
				return true;
			},
			nextTips() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '本次添加的设备包含wifi设备，是否开始配网操作，配网前请确保设备已通电',
					confirmText: '开始配网',
					cancelText: '下次配网',
					confirmColor: '#ff8f33',
					success: function (res) {
						if (res.confirm) {
							// 跳转到蓝牙页面
							uni.setStorageSync('mac_code', that.formData.code);
							uni.navigateTo({
								url: '/otherpages/health/networkSet'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
.boxPanel {
	padding: 40rpx 24rpx;
}
.row {
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}
textarea {
  height: 100rpx;
}
</style>
